<template>
  <div class="details">
    <!-- 导航栏 -->
    <van-nav-bar
      fixed
      left-arrow
      @click-left="$router.back()"
      title="文章详情"
    ></van-nav-bar>
    <!-- 标题 -->
    <h1>{{ info.title }}</h1>
    <div class="author">
      <van-image
        :src="'http://124.223.14.236:8060/' + info.pic"
        round
        width="1rem"
        height="1rem"
        fit="fill"
      />
      <div class="text">
        <p class="name">{{ info.author }}</p>
        <p class="time">{{ info.created_date | fromNow }}</p>
      </div>
    </div>
    <!-- 内容 -->
    <div class="markdown-body" v-html="info.content"></div>
    <van-divider>正文结束</van-divider>

    <!-- 相关推荐 -->
    <p style="font-size: 16px">相关推荐</p>
    <van-grid :column-num="2">
      <van-grid-item text="文字" v-for="item in recommend" :key="item.id">
        <van-image :src="'http://124.223.14.236:8060/' + item.pic" />
        <span class="van-multi-ellipsis--l2">{{ item.title }}</span>
      </van-grid-item>
    </van-grid>
    <!-- 底部 收藏点赞 -->
    <van-tabbar>
      <van-tabbar-item
        @click="collect"
        :icon="info.isCollect ? 'star' : 'star-o'"
      ></van-tabbar-item>
      <van-tabbar-item
        @click="zan"
        :icon="info.isLike ? 'good-job' : 'good-job-o'"
      ></van-tabbar-item>
      <van-tabbar-item icon="share"></van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { addLike, getArtilceDetail } from '@/api/articleList'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      list: {},
      info: '',
      recommend: ''
    }
  },
  async created() {
    const res = await getArtilceDetail(this.$route.query.id)
    this.list = res.data
    this.info = res.data.info
    this.recommend = res.data.recommend
  },
  computed: {
    ...mapState('user', ['token'])
  },
  methods: {
    // ? 收藏
    async collect() {
      if (this.token) {
        if (this.info.isCollect) {
          // 取消收藏
          await addLike({
            type: 1,
            article_id: this.$route.query.id,
            action: 'del'
          })
          this.$toast('取消成功')
        } else {
          // 收藏
          await addLike({
            type: 1,
            article_id: this.$route.query.id,
            action: 'add'
          })
          this.$toast('收藏成功')
        }
        this.info.isCollect = !this.info.isCollect
      }
      this.$toast('请先登录')
    },
    // ? 点赞
    async zan() {
      if (this.token) {
        if (this.info.isLike) {
          // 取消收藏
          await addLike({
            type: 2,
            article_id: this.$route.query.id,
            action: 'del'
          })
          this.$toast('取消成功')
        } else {
          // 收藏
          await addLike({
            type: 2,
            article_id: this.$route.query.id,
            action: 'add'
          })
          this.$toast('点赞成功')
        }
        this.info.isLike = !this.info.isLike
      }
      this.$toast('请先登录')
    }
  }
}
</script>

<style lang="less" scoped>
.details {
  // font-size: ;
  // padding-top: 46px;
  padding: 46px 10px 0 10px;
  h1 {
    padding: 25px 10px;
    font-size: 20px;
    color: #3a3a3a;
  }
  .author {
    padding: 10px 0;
    display: flex;
    .text {
      flex: 1;
      padding-left: 10px;
      line-height: 1.3;
      .name {
        font-size: 14px;
        margin: 0;
      }
      .time {
        margin: 0;
        font-size: 12px;
        color: #999;
      }
    }
  }
}
.markdown-body {
  ::v-deep {
    img {
      width: 90%;
    }
  }
}
.van-image {
  width: 120px;
  height: 100px;
}
.van-tabbar-item {
  color: rgb(119, 119, 119);
}
</style>
